<template>
  <nav class="navbar">
    <div class="nav-items">
      <router-link 
        to="/discover" 
        class="nav-item" 
        :class="{ active: route.path === '/discover' }"
      >
        发现
      </router-link>
      <router-link 
        to="/channel" 
        class="nav-item" 
        :class="{ active: route.path === '/channel' }"
      >
        频道
      </router-link>
      <router-link 
        to="/mine" 
        class="nav-item" 
        :class="{ active: route.path === '/mine' }"
      >
        我的
      </router-link>
    </div>

    <div class="search-icon" @click="router.push('/search')">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M20.3 18.9l-4.1-4c.9-1.2 1.4-2.6 1.4-4.1 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4.1-1.4l4 4.1c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4zm-13.3-1.9c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" fill="#495057"/>
      </svg>
    </div>
  </nav>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router' // 导入 useRouter
const route = useRoute()
const router = useRouter() // 获取 router 实例
</script>

<style src="./Navbar.css" scoped></style>